<template lang='pug'>
div
  ul.nearby
    li(v-for="item in nearbyAds",@click="choiceAds(item)")
      span.ads {{item.poiName}}
      span.long {{item.distanceShow}}
  router-link(to="/address/all/nearby").more 查看更多地址
</template>
<script>
import fetch from '@/config/fetch'
import { setSelectedPositionCookie } from '@/config/utils'
import { snxd } from '@/config/env'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      nearbyAds: []//附近可配送的地址
    }
  },
  created() {
    this.getNearbyAds()
  },
  methods: {
    getNearbyAds() {
      let url = `${snxd}/poi/getNearbyDeliveryCommunity.do?cityCode=${this.position.cityCode}&lat=${this.lalPosition.lat}&lng=${this.lalPosition.lng}&source=wap&version=3.2.2`
      fetch({
        url: url,
        params: {}
      }).then(res => {
        this.nearbyAds = res.data
      })
    },
    choiceAds(item) {
      let p = {
        storeLocation: item.storeLocation,
        cityName: item.cityName,
        cityCode: item.mdmCityCode,
        storeName: item.storeName,
        storeCode: item.storeCode,
        poiId: item.poiId,
        poiName: item.poiName,
      }
      let id = {
        addressId: ''
      }
      setSelectedPositionCookie(p)
      this.$store.commit('setPosition', p);
      this.$store.commit('setDefaultAddress', id);
      this.$router.push({ path: '/' })
    }
  },
  computed: {
    ...mapGetters([
      'position','lalPosition'
    ])
  }
}
</script>
<style lang='scss' scoped>
@import '../tool.scss';
.nearby {
  width: 100%;
  li {
    background-color: #fff;
    width: 100%;
    height: toRem(88);
    font-size: toRem(28);
    line-height: toRem(88);
    border-bottom: 1px solid #f0f0f0;
    &:last-of-type {
      border: 0;
    }
    span {
      display: inline-block;
    }
    .ads {
      color: #444;
      margin-left: toRem(33);
    }
    .long {
      color: #444;
      float: right;
      margin-right: toRem(33);
    }
  }
}

.more {
  display: block;
  margin-top: toRem(14);
  width: 100%;
  height: toRem(86);
  background-color: #fff;
  font-size: toRem(28);
  color: #ff7d37;
  text-align: center;
  line-height: toRem(86);
}
</style>